<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main v-if="target==false">
				<h3>海报设置</h3>
				
				<div style="margin-left: 200px;">
				<el-form-item label="分销海报图">
					<div>
						<el-upload
							
							  class="avatar-uploader"
							  :action="uploadUrl"
							  :show-file-list="false"
							  :on-success="handleAvatarSuccess"
							  :before-upload="beforeAvatarUpload"
							>
							  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
							  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
						</el-upload>
						<p style="color: #939393;">分销中心分销海报图片，建议尺寸750x1280像素</p>
					</div>
				</el-form-item>
				<el-form-item label="协议设置" :model="formData" >
					<a style="color: #0055ff;" @click="target=true">点击设置</a>
				</el-form-item>
				</div>
			</el-main>
			
			<el-main v-if="target==true">
				<span @click="back" style="padding: 0 15px;"><el-icon><ArrowLeft /></el-icon>返回</span>
				<span style="font-size: 22px;">协议编辑</span>
				<el-form :model="formData" label-width="auto" style="max-width: 100%;margin-left: 30px;margin-top: 30px;">
					<el-form-item label="协议类型" prop="goodsName">
					  <el-input  v-model="formData.goodsName"
							placeholder="请输入协议类型"
							style="width: 300px;"/>
					</el-form-item>
					<el-form-item label="协议标题" prop="goodsName" required>
					  <el-input  v-model="formData.goodsName"
							placeholder="请输入协议标题"
							style="width: 300px;"/>
					</el-form-item>
					<el-form-item label="内容">
						<div style="border: 1px solid #ccc">
						    <Toolbar
						        style="border-bottom: 1px solid #ccc"
						        :editor="editorRef"
						        :defaultConfig="toolbarConfig"
						        :mode="mode"
						    />
						    <Editor
						        style="height: 500px; overflow-y: hidden;"
						        v-model="valueHtml"
						        :defaultConfig="editorConfig"
						        :mode="mode"
						        @onCreated="handleCreated"
						    />
						</div>
					</el-form-item>
				</el-form>
				<div style="display: flex;justify-content: center;">
					<el-button @click="" type="primary">保存</el-button>
					<el-button @click="back" plain>取消</el-button>
				</div>
				
			</el-main>
	    </el-container>
	</div>
</template>

<script setup>
	import Header from "@/components/Header.vue"
	import {reactive,ref,onMounted,onBeforeUnmount, shallowRef,} from 'vue';
	import { uploadUrl,baseUrl } from "@/utils/request";
	import { Plus ,ArrowLeft} from '@element-plus/icons-vue';
	import '@wangeditor/editor/dist/css/style.css'
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	
	const target=ref(false)
	// 富文本编辑框
	let mode="default"
	const editorRef = shallowRef()
	const valueHtml = ref('<p>hello</p>')
	onMounted(() => {
	})
	const toolbarConfig = {}
	const editorConfig = { placeholder: '请输入内容...' }
	onBeforeUnmount(() => {
		const editor = editorRef.value
		if (editor == null) return
		editor.destroy()
	})
	const handleCreated = (editor) => {
	  editorRef.value = editor
	}
	
	let formData = reactive({})
	
	//详情
	const setDetail=async()=>{
		let res=await disSetDetail()
		Object.assign(formData,res)
		// formData=res
		// console.log("详情",formData)
	}
	
	
	const imageUrl = ref('')
	
	const handleAvatarSuccess= (response,uploadFile) => {
		// console.log('上传成功',response)
		imageUrl.value = URL.createObjectURL(uploadFile.raw)
	  //imageUrl.value=baseUrl+"manager/"+response.data
	  formData.menuImage=response.data
	}
	
	const beforeAvatarUpload= (rawFile) => {
		// console.log(rawFile)
		let reg=/(jpg|png|jpeg)$/
	  if (!reg.test(rawFile.type)) {
	    ElMessage.error('图片只能是jpg/jpeg/png格式的')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 4) {
	    ElMessage.error('图片的大小不能超过4MB')
	    return false
	  }
	  return true
	}
	
	// 返回
	const back=()=>{
		target.value=false
		
	}
	
</script>
<style  lang="less" scoped>
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.el-input{
				width:200px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
		}
	}
	.avatar-uploader .avatar {
	  width: 120px;
	  height: 120px;
	  display: block;
	}
	
	.active {
	  border: 1px solid red;
	}

	.selected{
		border:1px solid blue;
	}
	
	:deep(.selectedStyle){
		border: 1px solid blue !important;
	}
	h3 {
		margin-left: 50px;
		margin-bottom: 20px;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		margin-right: 100px;
	}
	
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>